<template>
  <div :class="$style.free">
    <Icon :allow="allow" :src="src" :srcset="srcset" :text="text" @on-click="iconClickHandle" />
    <el-dialog
      :visible.sync="visible"
      append-to-body
      :close-on-click-modal="false"
      title="选择示忙原因"
    >
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="reason" label="示忙原因">
          <el-select
            v-model="formData.reason"
            placeholder="请选择示忙原因"
            clearable
            filterable
            style="width:100%"
          >
            <el-option v-for="(l,i) in list" :key="i" :value="l.dictCode" :label="l.dictName" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div :class="$style.btn">
            <Button @click="visible=false">取消</Button>
            <Button type="primary" :loading="loading" @click="confirmHandle">确定</Button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Icon from './Icon'
import beforeSign from './js/beforeSign.js'
import afterSign from './js/afterSign.js'
import dyn from './js/dyn.js'

import { mapGetters } from 'vuex'
import { ccDict } from '@/api/dataDict'
export default {
  name: 'Free',
  components: {
    Icon
  },

  data() {
    return {
      loading: false,
      visible: false,
      formData: {
        reason: ''
      },
      formRules: {
        reason: [
          { required: true, message: '请选择示忙原因', trigger: 'change' }
        ]
      },
      // 示忙原因列表
      list: []
    }
  },
  computed: {
    ...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo']),
    src() {
      let src = beforeSign.busy
      if (this.sign && this.free) {
        src = afterSign.busy
      }
      if (this.sign && !this.free) {
        src = dyn.busy
      }
      if (this.talk) {
        src = beforeSign.busy
      }
      return src
    },
    srcset() {
      let src = beforeSign.busy2x
      if (this.sign && this.free) {
        src = afterSign.busy2x
      }
      if (this.sign && !this.free) {
        src = dyn.busy2x
      }
      if (this.talk) {
        src = beforeSign.busy2x
      }
      return src
    },
    text() {
      return this.sign && this.free ? '空闲' : '示忙'
    },
    sign() {
      return this.agentState.sign
    },
    free() {
      return this.agentState.free
    },
    talk() {
      return this.agentState.talk
    },
    allow() {
      return this.sign && !this.talk
    }
  },
  created() {
    this.getReasonList()
  },
  methods: {
    // 话务条被单击
    iconClickHandle() {
      const { sign, free } = this
      if (!sign || this.talk) return
      if (!free) {
        this.$cps.sayFree().then(res => {
          this.$callOperatorLogSuccess(3) // 示闲成功
          this.$notifySuccess('示闲成功！')
        }).catch(() => {
          this.$callOperatorLogFail(3) // 示闲失败
        })
      } else {
        this.visible = true
      }
    },
    // 弹窗后确认
    confirmHandle() {
      this.loading = true
      this.$refs.form
        .validate()
        .then(() => {
          let reasonText = ''
          for (const d of this.list) {
            if (this.formData.reason === d.dictCode) {
              reasonText = d.dictName
              break
            }
          }
          return this.$cps.sayBusy(this.formData.reason).then(res => {
            this.$notifySuccess('示忙成功！')
            // this.$cps.bus.$emit('OnSayFreeSuccess')
            this.$callOperatorLogSuccess(4, reasonText) // 示忙成功
            this.visible = false
          }).catch(() => {
            this.$callOperatorLogFail(4, reasonText) // 示忙失败
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 获取示忙原因
    getReasonList() {
      ccDict('BUSY_REASON').then(res => {
        this.list = res.data
      })
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.free {
}
.btn{
  @include flex($justify: flex-end);
}
</style>
